<template>
  <div>
    <el-select :disabled="disabled" v-model="value1" :style="'width: ' + width" ref="country" @change="selectChange">
      <el-option
        v-for="item in options1"
        :key="item.countryCode"
        :label="item.countryName"
        :value="item.countryCode">
      </el-option>
    </el-select>
    <el-select :disabled="disabled"  v-model="value2"  v-if="value1 !== '' && options2 && options2.length > 0"  :style="'width: ' + width" ref="province" @change="selectChange">
      <el-option
        v-for="item in options2"
        :key="item.provinceCode"
        :label="item.provinceName"
        :value="item.provinceCode">
      </el-option>
    </el-select>
    <el-select :disabled="disabled"  v-model="value3"  v-if="value2 !== '' && options3 && options3.length > 0"  :style="'width: ' + width" ref="city" @change="selectChange">
      <el-option
        v-for="item in options3"
        :key="item.cityCode"
        :label="item.cityName"
        :value="item.cityCode">
      </el-option>
    </el-select>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        options1: [],
        options2: [],
        options3: [],
        value1: '',
        value2: '',
        value3: ''
      };
    },
    props:{
      country:{
        type: String
      },
      province:{
        type: String
      },
      city:{
        type: String
      },
      width:{
        type: String
      },
      disabled:{
        type: Boolean,
        default: false
      }
    },
    created(){
      this.axios.post(this.lib.config.host.system + '/common/region/getCountrys').then((response)=>{
        this.options1 = response.data;
        if (this.country !== '') {
          this.value1 = this.country;
          this.getProvinces(this.country);
        }
      });
    },
    methods: {
      getProvinces(countryCode){
        if (countryCode && countryCode!== '') {
          this.axios.post(this.lib.config.host.system + '/common/region/getProvinces/' + countryCode).then((response)=>{
            this.options2 = response.data;
            if (this.province !== '') {
              this.value2 = this.province;
              this.getCities(this.province);
            }
          });
        }
      },
      getCities(provinceCode){
        if (provinceCode && provinceCode !== '') {
          this.axios.post(this.lib.config.host.system + '/common/region/getCities/' + provinceCode).then((response)=>{
            this.options3 = response.data;
            if (this.city !== '') {
              this.value3 = this.city;
            }
          });
        }
      },
      getAllLabel(){
        let arr = [];
        arr.push(this.$refs['country'].selectedLabel);
        if (this.$refs['province']) {
          arr.push(this.$refs['province'].selectedLabel);
        }
        if (this.$refs['city']) {
          arr.push(this.$refs['city'].selectedLabel);
        }
        return arr;
      },
      selectChange(val){
        this.$nextTick(()=>{
          this.$emit('select-change', this.getAllLabel());
        });
      }
    },
    watch:{
      country(val){
        this.value1 = val;
      },
      value1(val){
        this.$emit('update:country', val);
        this.value2 = '';
        this.getProvinces(val);
      },
      value2(val) {
        this.$emit('update:province', val);
        this.value3 = '';
        this.getCities(val);
      },
      value3(val){
        this.$emit('update:city', val);
      }
    }
  };
</script>
